<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Scoped CSS Variables and JS</title>
</head>

<body>
<h2>Update CSS Variables with <span>JS</span></h2>
<div class="controls">
<label for="spacing">spacing:</label>
<input type="range" id="spacing" name="spacing" min="10" max="200" value="10" data-sizing="px">
<label for="blur">blur:</label>
<input type="range" id="blur" name="blur" min="0" max="25" value="10" data-sizing="px">
<label for="base">base color</label>
<input type="color" id="color" value="#ffc600" name="base">
</div>
<div class="results">
<span class="text">{spacing:<label id="label_spacing">10px</label>}</span>
<span class="text">{blur:<label id="label_blur">10px</label>}</span>
<span class="text">{base color:<label id="label_base">#ffc600</label>}</span>
</div>
<img src="http://f.hiphotos.baidu.com/lvpics/h=800/sign=b346032cbe389b5027ffed52b534e5f1/960a304e251f95ca545f8b84ce177f3e6709525d.jpg">
</body>  
<style>
:root{
--base:#ffc600;
--spacing:10px;
--blur:10px;
}
body{
  text-align:center;
  background-color:rgb(126,104,151);
  color:#fff;
  font-family:'helvetica neue', sans-serif;
  font-size:30px;
  }
 h2{
padding-top:10px;
 }
 span{
 color:var(--base);
 font-size:40px;
 }
 .controls {
      margin-bottom: 50px;
    }
.results{
margin-bottom:50px;
color:var(--base);
}

img{
      width: 600px;
      height: 400px;
      padding: var(--spacing);
      background: var(--base);
      filter: blur(var(--blur)) ;
}
.text{
 font-size:30px;
 padding:0 10px 0 10px;
}
</style>

<script>
var inputs=document.querySelectorAll(".controls input");
function handle(){
const suffix=this.dataset.sizing||'';
document.documentElement.style.setProperty(`--${this.name}`,this.value+suffix);
document.getElementById(`label_${this.name}`).innerText=this.value+suffix;
}
inputs.forEach(input=>input.addEventListener('change',handle));
inputs.forEach(input=>input.addEventListener('mousemove',handle));   
</script>




</html>